<template>
  <div class="page-article" v-if="article">
    <div class="d-flex py-3 px-2 border-bottom">
      <div class="iconfont icon-Hero"></div>
      <div class="flex-1">
        {{article.title}}
      </div>
      <div class="text-grey fs-xs">
        2021-09-09
      </div>
    </div>
    <div class="body px-3 fs-lg" v-html="article.body"></div>
  </div>
</template>

<script>
export default {
  props: {
    id: {required: true}
  },
  data() {
    return {
      article: null
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`articles/${this.id}`)
      this.article = res.data
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style lang="scss">
.page-article {
  .body {
    img{
      max-width: 100%;
      height: auto;
    }
    iframe {
      width: 100%;
      height: auto;
    }
  }
}
</style>
